<template>
  <!--  销售加门店名称搜索，采购加采购单号搜索-->
  <div class="main">
    <el-tabs style="padding: 20px" type="border-card" v-model="activeName" @tab-click="changeTabs(activeName)">
      <!--    销售  -->
      <el-tab-pane label="销 售" name="sale">
        <div class="search">
          <span>时 间：   <el-date-picker
            v-model="params.time"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chooseTime"
          >
          </el-date-picker></span>
          <span style="margin-left: 20px">门店名称：
            <el-input v-model="params.saleStoreName" size="small" style="width: 200px" placeholder="请输入门店名称">

            </el-input>


          </span>
          <span style="margin-left: 20px">仓 库：<el-select v-model="params.saleWarehouseId" clearable placeholder="请选择"
                                                         size="small" @change="changeSelect">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select></span>
          <el-button size="small" style="background:#ff6a00;color: whitesmoke;margin-left: 20px" @click="getSalesList">
            查询
          </el-button>
        </div>
        <el-table :data="financeData"
                  v-if="activeName==='sale'"
                  height="calc(100vh - 280px)"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  v-loading="loading"
                  border
                  style="width: 100%; font-size: 12px;margin-top: 20px"
                  :headerCellStyle="{
                      textAlign: 'center',
                      fontWeight: '400',
                      background: '#ff6a00',
                      color: 'white',
                    }"
                  :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        >
          <el-table-column v-for="(item) in saleColumns" :prop="item.key" :label="item.title"
                           :key="item.key">
            <template slot-scope="scope">
                      <span v-if="item.key === 'paymentVouchers'">
                        <el-image v-for='(v, i) in scope.row.paymentVouchersList' :key="i"
                                  style="width: 50px; height: 50px"
                                  ref="preview" :src="v" :preview-src-list="scope.row.paymentVouchersList">

                        </el-image>
                      </span>
              <span v-else>{{ scope.row[item.key] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页-->
        <el-pagination
          style="margin-top: 20px"
          align="right"
          @size-change="handleFinanceSizeChange"
          @current-change="handleFinanceCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </el-tab-pane>
      <!--      采购-->
      <el-tab-pane label="采 购" name="purchase">
        <div class="search">
          <span>时 间：   <el-date-picker
            v-model="params.time"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chooseTime"
          >
          </el-date-picker></span>
          <span style="margin-left: 20px">采购单号：
            <el-input v-model="params.procureId" size="small" style="width: 200px" placeholder="请输入采购单号">


            </el-input>


          </span>
          <span style="margin-left: 20px">仓 库：<el-select v-model="params.PurWarehouseId" clearable placeholder="请选择"
                                                         size="small" @change="changeSelect">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select></span>
          <el-button size="small" style="background:#ff6a00;color: whitesmoke;margin-left: 20px"
                     @click="getPurchaseList">查询
          </el-button>
        </div>
        <el-table :data="purchaseData"
                  v-if="activeName==='purchase'"
                  height="calc(100vh - 280px)"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  v-loading="loading"
                  border
                  style="width: 100%; font-size: 12px;margin-top: 20px"
                  :headerCellStyle="{
                      textAlign: 'center',
                      fontWeight: '400',
                      background: '#ff6a00',
                      color: 'white',
                    }"
                  :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        >
          <el-table-column v-for="(item) in procureColumns" :prop="item.key" :label="item.title"
                           :key="item.key" :width="item.width">
            <template slot-scope="scope">
              <span v-if="item.key === 'paymentVouchers'">
                        <el-image v-for='(v, i) in scope.row.procureVouchersList' :key="i"
                                  style="width: 50px; height: 50px"
                                  ref="preview" :src="v" :preview-src-list="scope.row.procureVouchersList">

                        </el-image>
                      </span>
              <span v-if="item.key === 'paymentStatus'">
               <el-tag type='warning' v-if="scope.row.paymentStatus=='0'">未支付</el-tag>
               <el-tag type='success' v-if="scope.row.paymentStatus=='1'">已支付</el-tag>
              </span>
              <!--              <span v-if="item.key === 'arrivalStatus'">-->
              <!--               <el-tag type='warning' v-if="scope.row.arrivalStatus=='0'">未入库</el-tag>-->
              <!--               <el-tag type='success' v-if="scope.row.arrivalStatus=='1'">已入库</el-tag>-->
              <!--              </span>-->
              <span v-if="!['paymentStatus','arrivalStatus','classifications','paymentVouchers'].includes(item.key)">{{
                  scope.row[item.key]
                }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页-->
        <el-pagination
          style="margin-top: 20px"
          align="right"
          @size-change="handleFinanceSizeChange"
          @current-change="handleFinanceCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </el-tab-pane>
      <!--      其他收入-->
      <el-tab-pane label="其他收入" name="else">
        <div class="search">
          <span>时 间：   <el-date-picker
            v-model="params.time"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chooseTime"
          >
          </el-date-picker></span>

          <span style="margin-left: 20px">仓 库：<el-select v-model="params.warehouseId" clearable placeholder="请选择"
                                                         size="small" @change="changeSelect">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select></span>

          <el-button size="small" style="background:#ff6a00;color: whitesmoke;margin-left: 20px"
                     @click="getFinanceList(8)">查询
          </el-button>
        </div>
        <el-table :data="elseData"
                  v-if="activeName==='else'"
                  height="calc(100vh - 280px)"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  border
                  style="width: 100%; font-size: 12px;margin-top: 20px"
                  :headerCellStyle="{
                      textAlign: 'center',
                      fontWeight: '400',
                      background: '#ff6a00',
                      color: 'white',
                    }"
                  :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        >
          <el-table-column v-for="(item) in elseColumns" :prop="item.key" :label="item.title"
                           :key="item.key" :width="item.width">
            <template slot-scope="scope">
              <span v-if="item.key ==='feeType'">
                <span v-if="scope.row.feeType===1">采购运费</span>
            <span v-if="scope.row.feeType===2">调货运费</span>
            <span v-if="scope.row.feeType===3">销售运费</span>
            <span v-if="scope.row.feeType===4">售后运费</span>
            <span v-if="scope.row.feeType===5">叉车费用</span>
            <span v-if="scope.row.feeType===6">仓库租金</span>
            <span v-if="scope.row.feeType===7">其他收入</span>
                      </span>
              <span v-if="item.key === 'financeVouchers'">
                        <el-image v-for='(v, i) in scope.row.financeVouchersList' :key="i"
                                  style="width: 50px; height: 50px"
                                  ref="preview" :src="v" :preview-src-list="scope.row.financeVouchersList">

                        </el-image>
                      </span>
              <span v-if="item.key !== 'feeType'&&item.key !== 'financeVouchers'">
               {{ scope.row[item.key] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页-->
        <el-pagination
          style="margin-top: 20px"
          align="right"
          @size-change="handleFinanceSizeChange"
          @current-change="handleFinanceCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </el-tab-pane>
      <!--      共同承担-->
      <el-tab-pane label="共同承担" name="gtcd">
        <div class="search">
          <span>时 间：   <el-date-picker
            v-model="params.time"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chooseTime"
          >
          </el-date-picker></span>

          <span style="margin-left: 20px">仓 库：<el-select v-model="params.warehouseId" clearable placeholder="请选择"
                                                         size="small" @change="changeSelect">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select></span>
          <span
            style="margin-left: 20px">费用类型：<el-select v-model="params.type" clearable placeholder="请选择"
                                                      size="small" @change="changeSelect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select></span>

          <el-button size="small" style="background:#ff6a00;color: whitesmoke;margin-left: 20px"
                     @click="getFinanceList(2)">查询
          </el-button>
        </div>
        <el-table :data="gtcdData"
                  v-if="activeName==='gtcd'"
                  height="calc(100vh - 280px)"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  border
                  style="width: 100%; font-size: 12px;margin-top: 20px"
                  :headerCellStyle="{
                      textAlign: 'center',
                      fontWeight: '400',
                      background: '#ff6a00',
                      color: 'white',
                    }"
                  :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        >
          <el-table-column v-for="(item) in gtcdColumns" :prop="item.key" :label="item.title"
                           :key="item.key" :width="item.width">
            <template slot-scope="scope">
              <span v-if="item.key === 'type'">
                 <span v-if="scope.row.type===1">采购运费</span>
            <span v-if="scope.row.type===2">调货运费</span>
            <span v-if="scope.row.type===3">销售运费</span>
            <span v-if="scope.row.type===4">售后运费</span>
            <span v-if="scope.row.type===5">叉车费用</span>
            <span v-if="scope.row.type===6">仓库租金</span>
            <span v-if="scope.row.type===7">其他收入</span>
                 <span v-if="scope.row.type===8">其他收入</span>
            <span v-if="scope.row.type===9">罚款</span>
                      </span>
              <span v-if="item.key === 'financeVouchers'">
                        <el-image v-for='(v, i) in scope.row.financeVouchersList' :key="i"
                                  style="width: 50px; height: 50px"
                                  ref="preview" :src="v" :preview-src-list="scope.row.financeVouchersList">

                        </el-image>
                      </span>
              <span v-if="item.key !== 'type'&&item.key !== 'financeVouchers'">
               {{ scope.row[item.key] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页-->
        <el-pagination
          style="margin-top: 20px"
          align="right"
          @size-change="handleFinanceSizeChange"
          @current-change="handleFinanceCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </el-tab-pane>
      <!--      补贴费用-->
      <el-tab-pane label="补贴费用" name="subsidyFee">
        <div class="search">
          <span>时 间：   <el-date-picker
            v-model="params.time"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chooseTime"
          >
          </el-date-picker></span>

          <span style="margin-left: 20px">仓 库：<el-select v-model="params.saleWarehouseId" clearable placeholder="请选择"
                                                         size="small" @change="changeSelect">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select></span>
          <el-button size="small" style="background:#ff6a00;color: whitesmoke;margin-left: 20px"
                     @click="getSalesList()">查询
          </el-button>
        </div>
        <el-table :data="subsidyFeeData"
                  v-if="activeName==='subsidyFee'"
                  height="calc(100vh - 280px)"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  v-loading="loading"
                  border
                  style="width: 100%; font-size: 12px;margin-top: 20px"
                  :headerCellStyle="{
                      textAlign: 'center',
                      fontWeight: '400',
                      background: '#ff6a00',
                      color: 'white',
                    }"
                  :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        >
          <el-table-column v-for="(item) in subsidyFeeColums" :prop="item.key" :label="item.title"
                           :key="item.key">
            <template slot-scope="scope">
                      <span v-if="item.key === 'paymentVouchers'">
                        <el-image v-for='(v, i) in scope.row.paymentVouchersList' :key="i"
                                  style="width: 50px; height: 50px"
                                  ref="preview" :src="v" :preview-src-list="scope.row.paymentVouchersList">

                        </el-image>
                      </span>
              <span v-if="item.key !== 'paymentVouchers'">{{ scope.row[item.key] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页-->
        <el-pagination
          style="margin-top: 20px"
          align="right"
          @size-change="handleFinanceSizeChange"
          @current-change="handleFinanceCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </el-tab-pane>
      <!--      仓库-->
      <el-tab-pane label="仓 库" name="wareHouse">
        <div class="search">
          <span>时 间：   <el-date-picker
            v-model="params.time"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chooseTime"
          >
          </el-date-picker></span>

          <span style="margin-left: 20px">仓 库：<el-select v-model="params.warehouseId" clearable placeholder="请选择"
                                                         size="small" @change="changeSelect">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select></span>

          <span
            style="margin-left: 20px">费用类型：<el-select v-model="params.type" clearable placeholder="请选择"
                                                      size="small" @change="changeSelect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select></span>

          <el-button size="small" style="background:#ff6a00;color: whitesmoke;margin-left: 20px"
                     @click="getFinanceList(3)">查询
          </el-button>
        </div>
        <el-table :data="wareHouseData"
                  v-if="activeName==='wareHouse'"
                  height="calc(100vh - 280px)"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  border
                  style="width: 100%; font-size: 12px;margin-top: 20px"
                  :headerCellStyle="{
                      textAlign: 'center',
                      fontWeight: '400',
                      background: '#ff6a00',
                      color: 'white',
                    }"
                  :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        >
          <el-table-column v-for="(item) in gtcdColumns" :prop="item.key" :label="item.title"
                           :key="item.key" :width="item.width">
            <template slot-scope="scope">
              <span v-if="item.key === 'type'">
                 <span v-if="scope.row.type===1">采购运费</span>
            <span v-if="scope.row.type===2">调货运费</span>
            <span v-if="scope.row.type===3">销售运费</span>
            <span v-if="scope.row.type===4">售后运费</span>
            <span v-if="scope.row.type===5">叉车费用</span>
            <span v-if="scope.row.type===6">仓库租金</span>
            <span v-if="scope.row.type===7">其他收入</span>
                 <span v-if="scope.row.type===8">其他收入</span>
            <span v-if="scope.row.type===9">罚款</span>
                      </span>
              <span v-if="item.key === 'financeVouchers'">
                        <el-image v-for='(v, i) in scope.row.financeVouchersList' :key="i"
                                  style="width: 50px; height: 50px"
                                  ref="preview" :src="v" :preview-src-list="scope.row.financeVouchersList">

                        </el-image>
                      </span>
              <span v-if="item.key !== 'type'&&item.key !== 'financeVouchers'">
               {{ scope.row[item.key] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页-->
        <el-pagination
          style="margin-top: 20px"
          align="right"
          @size-change="handleFinanceSizeChange"
          @current-change="handleFinanceCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </el-tab-pane>
      <!--      工厂-->
      <el-tab-pane label="工 厂" name="factory">
        <div class="search">
          <span>时 间：   <el-date-picker
            v-model="params.time"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chooseTime"
          >
          </el-date-picker></span>

          <span style="margin-left: 20px">仓 库：<el-select v-model="params.warehouseId" clearable placeholder="请选择"
                                                         size="small" @change="changeSelect">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select></span>

          <span
            style="margin-left: 20px">费用类型：<el-select v-model="params.type" clearable placeholder="请选择"
                                                      size="small" @change="changeSelect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select></span>

          <el-button size="small" style="background:#ff6a00;color: whitesmoke;margin-left: 20px"
                     @click="getFinanceList(4)">查询
          </el-button>
        </div>
        <el-table :data="factoryData"
                  v-if="activeName==='factory'"
                  height="calc(100vh - 280px)"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  border
                  style="width: 100%; font-size: 12px;margin-top: 20px"
                  :headerCellStyle="{
                      textAlign: 'center',
                      fontWeight: '400',
                      background: '#ff6a00',
                      color: 'white',
                    }"
                  :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        >
          <el-table-column v-for="(item) in gtcdColumns" :prop="item.key" :label="item.title"
                           :key="item.key" :width="item.width">
            <template slot-scope="scope">
              <span v-if="item.key === 'type'">
                 <span v-if="scope.row.type===1">采购运费</span>
            <span v-if="scope.row.type===2">调货运费</span>
            <span v-if="scope.row.type===3">销售运费</span>
            <span v-if="scope.row.type===4">售后运费</span>
            <span v-if="scope.row.type===5">叉车费用</span>
            <span v-if="scope.row.type===6">仓库租金</span>
            <span v-if="scope.row.type===7">其他收入</span>
                 <span v-if="scope.row.type===8">其他收入</span>
            <span v-if="scope.row.type===9">罚款</span>
                      </span>
              <span v-if="item.key === 'financeVouchers'">
                        <el-image v-for='(v, i) in scope.row.financeVouchersList' :key="i"
                                  style="width: 50px; height: 50px"
                                  ref="preview" :src="v" :preview-src-list="scope.row.financeVouchersList">

                        </el-image>
                      </span>
              <span v-if="item.key !== 'type'&&item.key !== 'financeVouchers'">
               {{ scope.row[item.key] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页-->
        <el-pagination
          style="margin-top: 20px"
          align="right"
          @size-change="handleFinanceSizeChange"
          @current-change="handleFinanceCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </el-tab-pane>
      <!--      公司-->
      <el-tab-pane label="公 司" name="company">
        <div class="search">
          <span>时 间：   <el-date-picker
            v-model="params.time"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chooseTime"
          >
          </el-date-picker></span>

          <span style="margin-left: 20px">仓 库：<el-select v-model="params.warehouseId" clearable placeholder="请选择"
                                                         size="small" @change="changeSelect">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select></span>

          <span
            style="margin-left: 20px">费用类型：<el-select v-model="params.type" clearable placeholder="请选择"
                                                      size="small" @change="changeSelect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select></span>

          <el-button size="small" style="background:#ff6a00;color: whitesmoke;margin-left: 20px"
                     @click="getFinanceList(1)">查询
          </el-button>
        </div>
        <el-table :data="companyData"
                  v-if="activeName==='company'"
                  height="calc(100vh - 280px)"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  border
                  style="width: 100%; font-size: 12px;margin-top: 20px"
                  :headerCellStyle="{
                      textAlign: 'center',
                      fontWeight: '400',
                      background: '#ff6a00',
                      color: 'white',
                    }"
                  :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        >
          <el-table-column v-for="(item) in gtcdColumns" :prop="item.key" :label="item.title"
                           :key="item.key" :width="item.width">
            <template slot-scope="scope">
              <span v-if="item.key ==='type'">
                <span v-if="scope.row.type===1">采购运费</span>
               <span v-if="scope.row.type===2">调货运费</span>
               <span v-if="scope.row.type===3">销售运费</span>
            <span v-if="scope.row.type===4">售后运费</span>
            <span v-if="scope.row.type===5">叉车费用</span>
            <span v-if="scope.row.type===6">仓库租金</span>
            <span v-if="scope.row.type===7">其他支出</span>
            <span v-if="scope.row.type===8">其他收入</span>
            <span v-if="scope.row.type===9">罚款</span>
                      </span>

              <span v-if="item.key === 'financeVouchers'">
                        <el-image v-for='(v, i) in scope.row.financeVouchersList' :key="i"
                                  style="width: 50px; height: 50px"
                                  ref="preview" :src="v" :preview-src-list="scope.row.financeVouchersList">

                        </el-image>
                      </span>
              <span v-if="item.key !== 'type'&&item.key !== 'financeVouchers'">
               {{ scope.row[item.key] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页-->
        <el-pagination
          style="margin-top: 20px"
          align="right"
          @size-change="handleFinanceSizeChange"
          @current-change="handleFinanceCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import dayjs from "dayjs";
import quinn from "@/utils/quinn";
import rayUpload from "@/RayComponents/rayUpload.vue";
import rayMulImageUpload from "@/RayComponents/rayMulImageUpload.vue";
import Decimal from "decimal.js";

export default {
  components: {
    rayUpload,
    rayMulImageUpload,
  },
  name: "FinanceStatistics",
  meta: {
    title: "财务列表",
    icon: "el-icon-mobile",
    sort: 80,
    authority: 102,
  },

  mounted() {
    this.userName = quinn.getStorage("userDatav3").userName;
    this.$nextTick(() => {
      this.maxHeight = window.innerHeight - 240;
    });
    window.onresize = () => {
      this.$nextTick(() => {
        this.maxHeight = window.innerHeight - 240;
      });
    };
  },
  data() {
    return {
      userName: "",
      params: {
        pageSize: 20,
        pageNumber: 1,
        saleStoreName: "",
        saleWarehouseId: "",
        procureId: "",
        PurWarehouseId: "",
        startTime: "",
        endTime: "",
        warehouseId: "",
        type: "",
      },
      dataPick: "",
      companyData: [],
      subsidyFeeData: [],
      elseData: [],
      factoryData: [],
      activeName: 'sale',
      count: 0,
      btnType: "",
      imgHost: this.$imgHost,
      wareHouseList: [],
      autofocus: true,
      currentPage: 1,
      exType: "",
      gtcdData: [],
      loadingType: false,
      options: [{
        value: "1",
        label: "采购材料运费"
      }, {
        value: "2",
        label: "调货运费"
      }, {
        value: "3",
        label: "售后运费"
      }, {
        value: "4",
        label: "叉车费"
      }, {
        value: "5",
        label: "仓库租金"
      }, {
        value: "6",
        label: "其他费用"
      },],
      financeData: [],
      purchaseData: [],
      tabType: "",
      wareHouseData: [],
      loading: false,
      wareHouse: [],
      tabsType: "",
      saleColumns: [
        {
          key: "saleId",
          dataIndex: "saleId",
          title: '报货单号'
        },
        {
          key: "storeName",
          dataIndex: "storeName",
          title: '门店名称'
        }, {
          key: "createdAt",
          dataIndex: "createdAt",
          title: '提交仓库时间'
        }, {
          key: "warehouseName",
          dataIndex: "warehouseName",
          title: '出货仓库'
        }, {
          key: "receivedAmount",
          dataIndex: "receivedAmount",
          title: '回款金额'
        }, {
          key: "paymentVouchers",
          dataIndex: "paymentVouchers",
          title: '凭证'
        },
      ],
      procureColumns: [
        {
          key: "procureId",
          dataIndex: "procureId",
          title: '采购单号'
        }, {
          key: "orderName",
          dataIndex: "orderName",
          title: '采购单名称'
        }, {
          key: "materialTotalPrice",
          dataIndex: "materialTotalPrice",
          title: '合计金额'
        }, {
          key: "paymentAmount",
          dataIndex: "paymentAmount",
          title: '已付金额'
        }, {
          key: "waitPayAmountPrice",
          dataIndex: "waitPayAmountPrice",
          title: '未付金额'
        }, {
          key: "paymentVouchers",
          dataIndex: "paymentVouchers",
          title: '付款凭证'
        }, {
          key: "warehouseName",
          dataIndex: "warehouseName",
          title: '仓库'
        }, {
          key: "paymentStatus",
          dataIndex: "paymentStatus",
          title: '付款状态'
        },
      ],
      elseColumns: [
        {
          key: "warehouseName",
          dataIndex: "warehouseName",
          title: '仓库'
        }, {
          key: "time",
          dataIndex: "time",
          title: '发起时间'
        }, {
          key: "financeAmount",
          dataIndex: "financeAmount",
          title: '金额'
        }, {
          key: "remark",
          dataIndex: "remark",
          title: '情况说明'
        }, {
          key: "financeVouchers",
          dataIndex: "financeVouchers",
          title: '凭证'
        }
      ],
      gtcdColumns: [
        {
          key: "warehouseName",
          dataIndex: "warehouseName",
          title: '仓库'
        }, {
          key: "type",
          dataIndex: "type",
          title: '费用类型'
        }, {
          key: "time",
          dataIndex: "time",
          title: '发起时间'
        }, {
          key: "financeAmount",
          dataIndex: "financeAmount",
          title: '金额'
        }, {
          key: "targetId",
          dataIndex: "targetId",
          title: '关联订单'
        }, {
          key: "remark",
          dataIndex: "remark",
          title: '情况说明'
        }, {
          key: "financeVouchers",
          dataIndex: "financeVouchers",
          title: '凭证'
        }
      ],
      subsidyFeeColums: [
        {
          key: "saleId",
          dataIndex: "saleId",
          title: '销售单号'
        }, {
          key: "storeName",
          dataIndex: "storeName",
          title: '门店名称'
        }, {
          key: "warehouseName",
          dataIndex: "warehouseName",
          title: '出货仓库'
        }, {
          key: "saleTime",
          dataIndex: "saleTime",
          title: '下单时间'
        }, {
          key: "paymentAmount",
          dataIndex: "paymentAmount",
          title: '应收金额'
        }, {
          key: "receivedAmount",
          dataIndex: "receivedAmount",
          title: '回款金额'
        }, {
          key: "subAmount",
          dataIndex: "subAmount",
          title: '补贴金额'
        }, {
          key: "paymentVouchers",
          dataIndex: "paymentVouchers",
          title: '凭证'
        },
      ],
    };
  },
  created() {
    this.getWareList()
    this.getSalesList()
  },
  methods: {
    //获取仓库列表
    getWareList() {
      const params = {
        pageNumber: 1,
        pageSize: 10000,
      }
      this.$api.warehouseWarehouseList(params).then(res => {
        this.wareHouseList = res.rows
      })
    },
    //切换tabs栏
    changeTabs(val) {
      this.params = this.$options.data.call(this).params
      this.loading = true
      this.tabType = val
      if (val === 'purchase') {
        this.getPurchaseList()
      } else if (val === 'sale') {
        this.getSalesList()
      } else if (val === 'gtcd') {
        this.getFinanceList(2)
      } else if (val === 'subsidyFee') {
        this.getSalesList()
      } else if (val === 'wareHouse') {
        this.getFinanceList(3)
      } else if (val === 'factory') {
        this.getFinanceList(4)
      } else if (val === 'company') {
        this.getFinanceList(1)
      } else if (val === 'else') {
        this.getFinanceList(8)
      }
    },
    //销售列表
    getSalesList() {
      const params = {
        pageNumber: this.params.pageNumber,
        pageSize: this.params.pageSize,
        storeName: this.params.saleStoreName,
        warehouseId: this.params.saleWarehouseId,
        startTime: this.params.startTime,
        endTime: this.params.endTime,
        timeFilter: "createdAt",
        type: this.params.type
      }
      this.$api.saleSaleList(params).then(res => {
        this.loading = false
        this.count = res.count
        res.rows.forEach((item, index) => {
          item['key'] = toString(index + 1)
          item['warehouseName'] = item.warehouse.warehouseName
          if (item.paymentVouchers) {
            item.paymentVouchers = item.paymentVouchers.split(',');
            item.paymentVouchersList = [];
            item.paymentVouchers.map(k => {
              item.paymentVouchersList.push(this.$imgHost + k);
            })
          }

          if (item.outVouchers) item.outVouchers = item.outVouchers.split(',');
        })
        this.financeData = res.rows
        this.subsidyFeeData = res.rows
      })
    },
    //其他收入、仓库、公司、工厂、共同承担
    getFinanceList(val) {
      this.tabsType = val
      const params = {
        startTime: this.params.startTime,
        endTime: this.params.endTime,
        pageSize: this.params.pageSize,
        pageNumber: this.params.pageNumber,
        warehouseId: this.params.warehouseId,
        type: this.params.type
      }
      if (val === 8) {
        params.type = val
        params.optioner = ''
      } else {
        params.optioner = val
        params.type = this.params.type
      }
      this.loading = true
      this.$api.financeFinanceList(params).then(res => {
        this.loading = false
        res.rows.forEach((item, index) => {
          item['key'] = toString(index + 1)
          if (item.financeVouchers) {
            item.financeVouchers = item.financeVouchers.split(',');
            item.financeVouchersList = [];
            item.financeVouchers.map(k => {
              item.financeVouchersList.push(this.$imgHost + k);
            })
          }

          if (item.outVouchers) item.outVouchers = item.outVouchers.split(',');
        })
        if (val === 2) {
          this.gtcdData = res.rows
        } else if (val === 3) {
          this.wareHouseData = res.rows
        } else if (val === 4) {
          this.factoryData = res.rows
        } else if (val === 1) {
          this.companyData = res.rows
        } else if (val === 8) {
          this.elseData = res.rows
        }
        this.count = res.count
        this.loading = false
      })
    },
    //每页多少条
    handleFinanceSizeChange(val) {
      this.params.pageSise = val;
      if (this.activeName === 'sale' || this.activeName === 'subsidyFee') {
        this.getSalesList()
      } else if (this.activeName === 'purchase') {
        this.getPurchaseList()
      } else if (
        ['company', 'factory', 'wareHouse', 'gtcd'].includes(this.activeName)
      ) {
        this.getFinanceList(this.tabsType)
      }
    },
    // 当前页
    handleFinanceCurrentChange(val) {

      this.params.pageNumber = val;
      if (this.activeName === 'sale' || this.activeName === 'subsidyFee') {
        this.getSalesList()
      } else if (this.activeName === 'purchase') {
        this.getPurchaseList()
      } else if (
        ['company', 'factory', 'wareHouse', 'gtcd'].includes(this.activeName)
      ) {
        this.getFinanceList(this.tabsType)
      }
    },
    //搜索栏时间切换
    chooseTime(val) {
      this.params.pageNumber=1
      if (val) {
        this.params.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.params.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    changeSelect(){
      this.params.pageNumber=1
    },
    //获取采购单列表
    getPurchaseList() {
      const params = {
        pageSize: this.params.pageSize,
        pageNumber: this.params.pageNumber,
        procureId: this.params.procureId,
        warehouseId: this.params.PurWarehouseId,
        startTime: this.params.startTime,
        endTime: this.params.endTime,
        isFinance: 1,
      }
      this.$api.procureProcureList(params).then(res => {
        this.loading = false
        res.rows.forEach((item, index) => {
          item['key'] = toString(index + 1)
          if (item.materialTotalPrice) item.waitPayAmountPrice = Decimal(item.materialTotalPrice).sub(Decimal(item.paymentAmount)).toString();
          if (item.paymentVouchers) {
            item.paymentVouchers = item.paymentVouchers.split(',');
            item.procureVouchersList = [];
            item.paymentVouchers.map(k => {
              item.procureVouchersList.push(this.$imgHost + k);
            })
          }
          if (item.outVouchers) item.outVouchers = item.outVouchers.split(',');
        })
        this.purchaseData = res.rows
        this.count = res.count
      })
    }
  },
};
</script>
<style lang='less' scoped>
.main {
  /deep/ .el-tabs--border-card {
    //修改整体背景色与边框为透明
    background-color: transparent;
    border-color: transparent;

    .search {
      margin-top: 20px
    }

    .el-tabs__header {
      //修改标签背景色为透明，并且没有下边横线
      background-color: transparent;
      border-bottom: 1px solid transparent;

      .el-tabs__nav {
        border: 1px solid #ff6a00;

        .el-tabs__item {
          color: #ff6a00;
          font-weight: bold;
          border-left: 1px solid #ff6a00;
          height: 35px;
          line-height: 35px;

          &:hover {
            color: #f59a59;
          }
        }

        .el-tabs__item.is-active {
          background-color: #ff6a00;
          color: #ffffff;
          border-right-color: #ff6a00;
          border-left-color: #ff6a00;
          border-top-color: #ff6a00;
        }
      }
    }
  }

  /deep/ .el-tabs--border-card > .el-tabs__content {
    padding: 0
  }

  /deep/ .el-tabs__item.is-active {
    color: #fff !important;
    opacity: 1;
  }

}

/deep/ .el-input__inner:hover {
  border-color: #ff6a00 !important;
}

/deep/ .el-input__inner:focus {
  border-color: #ff6a00 !important;
}

/deep/ .selected {
  color: #ff6a00 !important;
}

/deep/ .active {
  color: #ff6a00 !important;
}

/deep/ .hover {
  color: #ff6a00 !important;
}

/deep/ .selected {
  color: #ff6a00 !important;
}

/deep/ .el-loading-text {
  color: #ff6a00 !important;
}

/deep/ .el-icon-loading {
  color: #ff6a00 !important;
}

.default /deep/ .el-button {
  border-color: #ff6a00;
  background-color: #ff6a00;
}

.default /deep/ .el-button:hover {
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}

/deep/ .el-button:hover {
  color: black;
  border-color: #dcdfe6;
  background-color: white;
}

span /deep/ .el-button:nth-child(2) {
  border-color: #ff6a00;
  background-color: #ff6a00;
}

span /deep/ .el-button:nth-child(2):hover {
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}
</style>
